<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>好看的呼吸灯效果</title>
</head>
<style>
	*{
	  margin:0;
	  padding: 0;
	}
	body,html{
	  background-color: #000;
	}
	.app{
	  width:100%;
	  height: 100vh;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	span{
	  width: 60px;
	  height: 60px;
	  margin: 40px;
	  border-radius: 50%;
	}
	.red{
	  animation: just1 2s ease-in-out infinite alternate;
	}
	.green{
	  animation: just2 3s ease-in-out infinite alternate;
	}
	.blue{
	  animation: just3 4s ease-in-out infinite alternate;
	}
	@keyframes just1{
	  0%{
	    border: 5px solid rgba(255,0,0,0);
	    box-shadow: 0 0 0 rgba(255,0,0,0),0 0 0 rgba(255,0,0,0) inset;
	  }
	  100%{
	    border: 5px solid rgba(255,0,0,1);
	    box-shadow: 0 0 70px rgba(255,0,0,0.7),0 0 15px rgba(255,0,0,0.5) inset;
	  }
	}
	@keyframes just2{
	  0%{
	    border: 5px solid rgba(0,255,0,0);
	    box-shadow: 0 0 0 rgba(0,255,0,0),0 0 0 rgba(0,255,0,0) inset;
	  }
	  100%{
	    border: 5px solid rgba(0,255,0,1);
	    box-shadow: 0 0 70px rgba(0,255,0,0.7),0 0 15px rgba(0,255,0,0.5) inset;
	  }
	}
	@keyframes just3{
	  0%{
	    border: 5px solid rgba(0,0,255,0);
	    box-shadow: 0 0 0 rgba(0,0,255,0),0 0 0 rgba(0,0,255,0) inset;
	  }
	  100%{
	    border: 5px solid rgba(0,0,255,1);
	    box-shadow: 0 0 70px rgba(0,0,255,0.7),0 0 15px rgba(0,0,255,0.5) inset;
	  }
	}
</style>
<body>
  <div class="app">
    <span class="red"></span>
    <span class="green"></span>
    <span class="blue"></span>
  </div>
</body>
</html>